<template>
  <h2>测试三：计算属性</h2>
  <h2>{{ school.name }}--{{school.level}}</h2>
  <h3>{{ school.allname }}</h3>
  <input v-model=" school.name ">
  <input v-model=" school.level ">
  <input v-model=" school.allname ">
</template>

<script>
import {reactive,computed} from "vue";

export default {
  name: "computedv3",
  // computed:{
  //   allname(){
  //     return this.school.name+this.school.level
  //   }
  // },
  setup(){
    let school=reactive({
      name:'衡水职业技术',
      level:'学院'
    })
    //更简单的实现方式，把属性绑定在school对象上
    //这里写完发现了一个提示，getter: 在绑定到文本框改时，提示只读，修改如下代码：
    school.allname=computed({
        get(){
          return school.name+'-' + school.level
        },
        set(value){
          let vs=value.split("-")
          school.name=vs[0]
          school.level=vs[1]
        }
    })
    return{
      school
    }
  }
}
</script>
